// import h from '../../../diff/src/snabbdom/h'
// import patch from '../../../diff/src/snabbdom/patch'
import {patch} from './snabbdom/patch'
import {h} from './snabbdom/h'

// const vnode1 =  h('div',{key:'div-id'},[
//     h('h1',{key:'h1-id'},
//         h('a',{key:'a-id'},'张三')
//     )
//   ])

const container = document.getElementById('container')
const vnode1 = h('ol',{key:'ol-id'},[
    h('li',{key:'zhang3'},'张三'),
    h('li',{key:'li4'},'李四')
])
const vnode2 = h('ol',{key:'ol-id'},[
    h('li',{key:'zhang3'},'+++ 张三2 +++'),
    h('li',{key:'wang5'},'+++ 王五2 +++'),
    h('li',{key:'li4'},'+++ 李四2 +++'),
])

const vnode3 = h('ol',{key:'ol-id'},[
    h('li',{key:'wang5'},'+++ 王五3 +++'),
    h('li',{key:'zhang3'},'+++ 张三3 +++')
])

const vnode4 = h('ol',{key:'ol-id'},[
    h('li',{key:'wang5'},'+++ 王五4 +++'),
    h('li',{key:'zhang3'},'+++ 张三4 +++')
])
const vnode5 = h('ol',{key:'ol-id'},[
    h('li',{key:'zhang3'},'张三'),
    h('li',{key:'li5'},'李五'),
    h('li',{key:'li4'},'李四'),
    h('li',{key:'li6'},'李六'),
    // h('li',{key:'wang5'},'王五4 +++'),
])

// patch(container, vnode1)
patch(container, vnode2)
document.onclick = ()=>{
    // 新前/旧前 --> 新后/旧后 
    // patch(vnode1,vnode2)
    // 新后/旧前 -> 新前/旧后
    // patch(vnode2,vnode3)
    // 有节点新增
    patch(vnode2, vnode5)
}

